<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态窗体</title>
    <link rel="stylesheet" href="../../../js/bootstrap/css/bootstrap.css">

</head>
<body>

<div class="container">

    <!--
          success -- green
          danger  --- red
          warning --- yellow
          primary --- blue
          info    ---  gray
    -->

    <!--
         btn
         text
         panel
     -->

    <button class="btn btn-primary" id="btnAdd">添加</button>
    <button class="btn btn-warning" id="btnShow">修改</button>
    <!--modal：内三层、外三层-->

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>部门</th>
                <th>职务</th>
            </tr>
        </thead>

        <tbody>
           <tr>
               <td>1</td>
               <td>张三丰</td>
               <td>HR</td>
               <td>职员</td>
           </tr>

           <tr>
               <td>1</td>
               <td>张三丰</td>
               <td>HR</td>
               <td>职员</td>
           </tr>
           <tr>
               <td>1</td>
               <td>张三丰</td>
               <td>HR</td>
               <td>职员</td>
           </tr>
           <tr>
               <td>1</td>
               <td>张三丰</td>
               <td>HR</td>
               <td>职员</td>
           </tr>
        </tbody>

    </table>
</div>


<div class="modal fade" id="info">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">
                <h3>员工添加</h3>
            </div>
            <div class="modal-body">
               <form class="form-horizontal">
                   <div class="form-group">
                       <label class="control-label col-md-offset-1 col-md-2">员工姓名</label>
                       <div class="col-md-4">
                           <input id="empName" class="form-control"/>
                       </div>
                   </div>
               </form>
            </div>
            <div class="modal-footer">
                <div class="btn-group">
                    <button id="btnSubmit" class="btn btn-primary">确认</button>
                    <button id="btnESC" class="btn btn-warning">取消</button>

                </div>
            </div>

        </div>
    </div>

</div>
</body>
<script src="../0.vendor/jquery-3.6.0.js"></script>
<script src="../../../js/bootstrap/js/bootstrap.js"></script>
<script src="js/modal.js"></script>


</html>